<!--  地图跟踪设备-->
<template>
  <div>
    <Modal v-model="map.show"  :title="map.title" :mask-closable="false" :footer-hide=true width="1080px" :closable="false">
      <div id="divCon" style="width: 100%;height: 500px;background-color: #3caf36">
        <div id="trackMap" ref="trackMap" style="width:100%;height:100%;background-color: #000000" ></div>
      </div>
      <Form>
        <FormItem>
          <div style="float: right;">
            <Button @click="close">{{$t('close')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Map from "ol/Map";
import {defaults as defaultInteractions} from "ol/interaction";
import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer";
import XYZ from "ol/source/XYZ";
import {Vector as VectorSource} from "ol/source";
import View from "ol/View";
import LayerVector from "ol/layer/Vector";
import SourceVector from "ol/source/Vector";
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";
import Feature from "ol/Feature";
import {Point} from "ol/geom";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import iconSrc from "@/assets/images/center-icon.png";
import Text from "ol/style/Text";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Device from "@/api/Device";
import {solveGps} from "@/view/Home/map/maptools/tool/GpsUtils";
import {apiResult} from "@/libs/util";

export default{
  data(){
    return{
      deviceApi: new Device(),
      deviceData:null,
      map:{
        dragPos:null,
        centerPos:[],
        title:"",
        show:false,
        mapInfo:null,
        customLayers:{
          layerVector: new LayerVector(),
          sourceVector: new SourceVector(),
        },
        pointFeature:null,
        mapObj:null,
        element:null,
        deviceName:"",
        refreshTimer:null,
      }
    }
  },
  methods:{
    refreshPosition(){
      this.deviceApi.getCurrentPosition(this.deviceData.arrt.deviceCode).then(res=>{
          apiResult(res.data,false,result=>{
            if (!!result.data.longitude && result.data.longitude > 0.0){
              const gpsData =solveGps(result.data.coordinateSystem,
                parseFloat(result.data.latitude),
                parseFloat(result.data.longitude));
              this.map.centerPos = [];
              this.map.centerPos.push(gpsData.lon);
              this.map.centerPos.push(gpsData.lat);
              this.map.customLayers.sourceVector.removeFeature(this.map.pointFeature);
              this.genNewPoint();
              this.map.customLayers.sourceVector.addFeature(this.map.pointFeature);
            }
          })
       })
    },
    close(){
      if (!!this.map.mapObj){
        this.map.mapObj.dispose()
        this.map.mapObj = null;
      }
      if (this.refreshTimer != null){
        clearInterval(this.refreshTimer);
        this.refreshTimer = null;
      }
      this.map.show = false;
    },
    openDialog(data){
      this.deviceData = data;
      this.map.show = true;
      this.map.centerPos = [];
      this.map.centerPos.push(data.longitude);
      this.map.centerPos.push(data.latitude);
      this.map.deviceName=data.title;
      this.$nextTick(()=>{
        this.initMap();
        this.refreshTimer = setInterval(this.refreshPosition, 5000);
      });
    },
    genNewPoint(){
      this.map.pointFeature = new Feature(
        new Point(this.map.centerPos)
      );
      this.map.pointFeature.setStyle(
        new Style({
          // 设置一个标识
          image: new Icon({
            src: iconSrc,
            // 这个是相当于是进行切图了
            // size: [50,50],
            // 注意这个，竟然是比例 左上[0,0]  左下[0,1]  右下[1，1]
            anchor: [0.8, 0.8],
            // 这个直接就可以控制大小了
            scale: 0.8,
            // 开启转向
            rotateWithView: true,
            // rotation: 0,
          }),
          color: 'rgb(13,232,13)',
          text: new Text({
            // 对其方式
            textAlign: 'center',
            // 基准线
            textBaseline: 'middle',
            offsetY: -30,
            // 文字样式
            font: 'normal 16px times New Roman',
            // 文本内容
            text: this.map.deviceName,
            // 文本填充样式
            fill: new Fill({
              color: 'rgb(255,255,255)'
            }),
            padding: [5, 5, 5, 5],
            /*            backgroundFill: new Fill({
                          color: 'rgb(17,140,17)'
                        }),*/
            stroke: new Stroke({
              width: 5,
              //color: [34, 139, 34, 0.6],
              color: [0,0,255,0.9],
              lineDash: [10, 10],
            })
          })
        })
      );
    },
    initMap(){
      this.genNewPoint();
      this.map.customLayers.sourceVector = new VectorSource({features: [this.map.pointFeature]});
      this.map.customLayers.layerVector = new VectorLayer({source:this.map.customLayers.sourceVector});

      this.map.mapObj = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: this.map.mapInfo.sub.url[0],
            }),
          }),
          this.map.customLayers.layerVector,
        ],
        target: this.map.element,
        view: new View({
          projection: this.map.mapInfo.projection,
          center: this.map.centerPos,
          zoom: 16,
        }),
      });
    }
  },
  mounted() {

    this.map.mapInfo = new MapInfo().get();
    this.$nextTick(()=>{
      this.map.element = this.$refs.trackMap;
      this.map.title = this.$t('track_movement');
    })
  },
  beforeDestroy() {
    close();
  }
}



</script>
<style>

</style>
